<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-3.3.1.min.js" ></script>
		<script>
			$(function(){
				$("#d1 ul li").width("140px");
				//$("#d1 ul li").first().css("border","5px solid red");
				//$("#d1 ul li").last().css("border","5px solid yellow");
				$("#d1 ul li").first().css("border","5px solid red").end().last().css("border","5px solid yellow");
//				$("#d1 ul li").hover(function(){
//					$(this).css("font-size","60px");
//				},function(){
//					$(this).css("font-size","16px");
//				});
				$("#d1 ul").on("mouseover","li",function(){
					$(this).css("font-size","60px");
				}).on("mouseout","li",function(){
					$(this).css("font-size","16px");
				});
				$("#addNew").click(function(){
					var nf=window.prompt("新输入新水果");
					$("#d1 ul").append("<li>"+nf+"</li>");
				});
			});
		</script>
	</head>
	<body>
		<div id="d1">
			<ul>
				<li>桃子</li>
				<li>桃子</li>
				<li>桃子</li>
				<li>桃子</li>
				<li>桃子</li>
				<li>桃子</li>
				<li>桃子</li>
				<li>桃子</li>
				<li>桃子</li>
				<li>桃子</li>
				<li>桃子</li>
			</ul>
		</div>
		<input type="button" value="增加一个新水果" id="addNew"/>
	</body>
</html>
